<template>
	<div>
		<u-swiper :list="list1" keyName="image" @click="clickSwiper" imgMode="heightFix" height="220"></u-swiper>
		<u-tabs :list="list4" lineWidth="30" lineColor="#f56c6c" >
	    </u-tabs>
		<div class="grid-div">
			<u-grid :border="false" col="3" >
			    <u-grid-item v-for="(item,inx) in category" :key="inx" bgColor="#f4f3f2" :customStyle="{width:'30%',marginRight:'2%',borderRadius:'10rpx',padding:'10px'}" @click="checkGrid(item)">
					<u--image :src="item.thumb.url" width="80px" height="80px"></u--image>
					<text class="grid-div__text">{{item.title}}</text>
			    </u-grid-item>
			</u-grid>
		</div>
	</div>
</template>

<script>
	import {getLotteryList} from '@/api/lottery.js'
	export default {
		data() {
			return {
				list1: [{
                    image: 'https://images.prayerbless.com/upload/f036/customise/images/m_banner_45.jpg?v=1673602175',
                    title: '昨夜星辰昨夜风，画楼西畔桂堂东',
                },{
                    image: 'https://images.prayerbless.com/upload/f036/customise/images/m_banner_118.jpg?v=1675088303',
                    title: '身无彩凤双飞翼，心有灵犀一点通'
                },{
                    image: 'https://images.prayerbless.com/upload/f036/customise/images/m_banner_24.jpg?v=1673602334',
                    title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
                }],
				list4: [{
					name: '推荐'
				}],
				category:[]
			}
		},
		onLoad(){
			this.lotteryList();
		},
		methods: {
			lotteryList(){
				getLotteryList().then(res=>{
					this.isFristLoading = false;
					if(res.code === 200) {
						this.category = res.data.list;
					}else{
						uni.$u.toast(res.message);
					}
				})
			},
			clickSwiper(e){
				console.log(this.list1[0])
			},
			checkGrid(item){
				uni.$u.route({
					url:'pages/'+item.typeid+'/index',
					params:{
						typeid : item.typeid,
						alias : item.alias,
					}
				});
			}
		},
		onPullDownRefresh() {
			//下拉刷新
			 uni.stopPullDownRefresh();
		},
	}
</script>

<style lang="less">
	.grid-div{
		width: 100%;
		padding: 30rpx 3%;
		&__text{
			color: #575e68 !important;
			margin-top: 0.4rem;
			font-size: 16px;
		}
	}
</style>